<template>
  <div class="intimacy-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论点赞</el-breadcrumb-item>
      <el-breadcrumb-item>用户亲密度</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="echarts" ref="container"></div>
  </div>
</template>

<script>
import testAx from '@/utils/testApiServer.js'
import * as echarts from 'echarts'
export default {
  name: 'intimacy',
  methods: {
    async getRelationship() {
      const { data: res} = await testAx.get('/relationship')
      console.log(res);
      this.draw(res.nodes, res.links)
    },
    draw(nodes, links) {
      const options = {
        title: {
          text: "用户亲密度关系",
          textStyle:{
            color:'rgb(0,0,0,0.5)',
            fontFamily:'Arial',
            fontSize:'20',
          },
          left:'center'
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            label: {
              show: true,
              fontSize: 14,
              align: 'center',
              rotate: 20
            },
            type: "graph",
            layout: "none",
            symbol: 'circle',
            symbolSize:50,
            roam: true,
            edgeSymbol: ["none", "arrow"],
            edgeLabel: {
              normal: {
                  color: '#858585',//线上的字体颜色
                  show: true,
                  formatter: function (x) {
                      return x.data.name;
                  }
              }
            },
            edgeSymbolSize: 12,
            data: nodes,
            // links: [],
            links: links,
            itemStyle:{
              color:'#64caff',
            },
            lineStyle: {
              opacity: 1,
              width: 2,
              curveness: 0,
            },
          },
        ],
      };
      var myCharts = echarts.init(this.$refs.container);
      myCharts.setOption(options);
    }
  },
  mounted() {
    this.getRelationship()
  }
}
</script>